<template>
    <div class="user-management">
        <Search @searchData="getUserData" @resetData="getUserData" :placeholder="placeholder"></Search>
        <!-- <AddAndDel @delsByIds="delsByIds"></AddAndDel> -->
        <el-card>
            <el-table ref="multipleTable" class="custom-table" height="450px"
                :default-sort="{ prop: 'date', order: 'descending' }"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" :data="tableData" tooltip-effect="dark"
                style="width: 100%">
                <el-table-column prop="avatarUrl" label="头像" align="center">
                    <template slot-scope="scope">
                        <el-image class="img" :src="scope.row.avatarUrl" :preview-src-list="srcList"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="userAccount" label="账号">
                </el-table-column>
                <el-table-column prop="username" label="用户名">
                </el-table-column>
                <el-table-column prop="roleName" label="角色">
                </el-table-column>
                <el-table-column prop="userTel" label="电话">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="180">
                </el-table-column>
                <el-table-column prop="balance" label="余额">
                </el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleEdit(scope.row)" v-if="scope.row.enable == 1"
                            plain>编辑</el-button>
                        <el-button type="danger" size="mini" v-if="scope.row.enable == 1" @click="handleDelete(scope.row)"
                            plain>禁用</el-button>
                        <el-button type="danger" size="mini" v-if="scope.row.enable == 0" disabled>已禁用</el-button>
                        <el-button type="warning" size="mini" v-if="scope.row.enable == 0" @click="handleUse(scope.row)"
                            plain>启用</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <Pagination :paginationData="paginationData" @getPaginationData="getUserData"></Pagination>
        </el-card>
        <UserDialog @editUserInfo="editUserInfo"></UserDialog>
    </div>
</template>
<script>
import Search from '../../components/search/index.vue'
import AddAndDel from '../../components/add_and_del/index.vue'
import Pagination from '../../components/pagination/index.vue'
import UserDialog from './dialog/index.vue'
export default {
    name: 'UserManagement',
    components: {
        Search,
        AddAndDel,
        Pagination,
        UserDialog
    },
    mixins: [],
    props: {

    },
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            paginationData: {},
            placeholder: '请输入账号查询',
            srcList: []
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.getUserData()
    },
    methods: {
        // 获取用户列表
        getUserData(obj = { currentPage: 1, pageSize: 10, keyword: '' }) {
            this.request.post('/user/userList', obj).then(res => {
                if (res.code == 20000) {
                    res.data.list.forEach(item => {
                        if (item.createdDt) {
                            item.createdDt = item.createdDt.slice(0, 10)
                        }
                    })
                    this.tableData = res.data.list
                    this.paginationData = res.data
                    this.srcList = res.data.list.map(item => item.avatarUrl)
                }
            })
        },
        // 修改用户信息
        editUserInfo(obj) {
            this.request.put('/user/userEdit', obj).then(res => {
                if (res.code == 20000) {
                    // 重新获取公告列表
                    this.getUserData()
                    this.$message({
                        type: 'success',
                        message: '操作成功！'
                    })
                }
            })
        },
        // 编辑用户信息
        handleEdit(row) {
            this.$bus.$emit('add', true)
            this.$bus.$emit('getForm', row)
        },
        // 封号
        handleDelete(row) {
            // enable： 0：禁用 1：启用
            this.$confirm('此操作将永久禁止用户使用该账号, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const obj = {
                    enable: 0,
                    userId: row.userId
                }
                this.editUserInfo(obj)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消禁用账号'
                });
            });
        },
        // 解封
        handleUse(row) {
            this.$confirm('此操作将永久禁止用户使用该账号, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const obj = {
                    enable: 1,
                    userId: row.userId
                }
                this.editUserInfo(obj)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消启用账号'
                });
            });
        }
    }
};
</script>
<style lang='less' scoped>
.user-management {
    .el-table {
        font-size: 12px;
    }

    .img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #11A983 !important;
        color: #FFF;
    }

}
</style>